import React, { Component } from 'react'

class AddStudent extends Component {
  constructor () {
    super()
    this.stateHandler = this.stateHandler.bind(this)
  }
  // 定义组件中的状态
  state = {
    number: '',
    name: '',
    sex: '女',
    age: '',
    college: '大前端',
    hobbies: [
      {
        id: 1,
        title: '足球',
        ischecked: false
      },
      {
        id: 2,
        title: '蓝球',
        ischecked: false
      },
      {
        id: 3,
        title: '橄榄球',
        ischecked: false
      }
    ]
  }
  // 浅拷贝,数组指针无法拷贝
  // origin = { ...this.state }
  // 深拷贝
  origin = JSON.parse(JSON.stringify(this.state))
  // 处理函数
  stateHandler (e) {
    // 获取当前输入的值，然后调用 setState 更新在具体的属性上
    const value = e.target.value
    const prop = e.target.name
    this.setState({
      [prop]:value
    }, () => {
      // console.log(this.state.college)
    })
  }
  hobbyHandler (index,ev) {
    // 当前操作需要提前获取被操作的索引，事件对象
    const ischecked = ev.target.checked
    const hobbies = [...this.state.hobbies]
    hobbies[index].ischecked = ischecked
    this.setState({
      hobbies
    }, () => {
      // console.log(this.state.hobbies)
    })
  }
  submit = (ev) => {
    ev.preventDefault();
    /* 
      提交的时候需要将表单里有用信息整合在一起
      1. 筛选出当前次选中的爱好
      2. 将上述处理好的数据与其他数据组合在一起
      3. 将当前的数据，利用回调的方式传回给上层组件
      4. 提交操作完成之后我们再将之前的 state 的数据再次设置回界面上
    */
    const hobbies = this.state.hobbies
      .filter(hobby => hobby.ischecked)
      .map(hobby => hobby.title)
      
    const formValue = {
      ...this.state,
      hobbies
    }
    // console.log(formValue)
    // 小注意点：setState()是异步操作
    // this.props.addList(formValue)
    // this.setState(this.origin)
    this.props.addList(formValue, () => {
      this.setState(this.origin)
    })
  }
  render () {
    return (
      <div className="col-md-5">
        <form onSubmit={this.submit}>
          <div className="form-group">
            <label>学号</label>
            <input
              name='number'
              value={this.state.number}
              onChange={this.stateHandler}
              type="number"
              className="form-control"
              placeholder="请输入学号" />
          </div>
          <div className="form-group">
            <label>姓名</label>
            <input
              name='name'
              value={this.state.name}
              onChange={this.stateHandler}
              type="text"
              className="form-control"
              placeholder="请输入姓名" />
          </div>
          <div className="form-group">
            <label>性别&nbsp;&nbsp;</label>
            <label className="checkbox-inline">
              <input
                name="sex"
                checked={this.state.sex === '男'}
                onChange={this.stateHandler}
                type="radio"
                value="男" /> 男
            </label>
            <label className="checkbox-inline">
              <input
                name="sex"
                checked={this.state.sex === '女'}
                onChange={this.stateHandler}
                type="radio"
                value="女" /> 女
            </label>
          </div>
          <div className="form-group">
            <label>年龄</label>
            <input
              name="age"
              value={this.state.age}
              onChange={this.stateHandler}
              type="text"
              className="form-control"
              placeholder="请输入年龄" />
          </div>
          <div className="form-group">
            <label>入学时间</label>
            <input className="form-control" type="date" />
          </div>
          <div className="form-group">
            <label>爱好</label>
            {
              this.state.hobbies.map((hobby, index) => {
                return (
                  <div className="checkbox" key={hobby.id}>
                    <label>
                      <input
                        checked={hobby.ischecked}                 
                        value={hobby.title}
                        onChange={this.hobbyHandler.bind(this, index)}
                        type="checkbox" /> {hobby.title}
                    </label>
                  </div>
                )
              })
            }
          </div>
          <div className="form-group">
            <label>所属学院</label>
            <select
              name="college"
              onChange={this.stateHandler}
              className="form-control">
              <option value="大前端">大前端</option>
              <option value="Java">Java</option>
              <option value="python">python</option>
            </select>
          </div>
          <button type="submit" className="btn btn-default">添加</button>
        </form>
      </div>
    )
  }
}

export default AddStudent